<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        form {
            width: 400px;
        }

        label {
            display: inline-block;
            text-align: right;
            width: 120px;
        }

        form>p {
            margin-top: 10px;
        }


        p span {
            text-align: center;
        }

        form>p:last-of-type {
            text-align: center;
        }
    </style>
</head>

<body>
    <form onsubmit="return false">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
        </p>
        <p>
            <label for="">密码:</label>
            <input type="text" class="pwd">
        </p>
        <p><span class="tips"></span></p>
        <p><input type="checkbox" name="" id="isRem">是否记住用户名? </p>
        <p>
            <input type="submit" class="subBtn" value="登录">
            <input type="reset" class="retBtn" value="取消">
        </p>
    </form>
</body>
<script>
    // 用户输入的 用户名和密码(有可能会有错误)
    // cookie中存的    用户名和密码(真正的)

    // 用户名 不同  用户名有误
    // 密码 不同    密码有误


    var userInp = document.getElementsByClassName("user")[0];
    var pwdInp = document.getElementsByClassName("pwd")[0];
    var tips = document.getElementsByClassName("tips")[0];
    var subBtn = document.getElementsByClassName("subBtn")[0];

    var isRem = document.getElementById("isRem");


    // var cookie = document.cookie;
    // if (cookie) {
    //     var dataList = cookie.split("; ");
    //     var obj = {};
    //     for (var i = 0; i < dataList.length; i++) {
    //         var str = dataList[i];
    //         var key = str.split("=")[0];
    //         var val = str.split("=")[1];
    //         obj[key] = val;
    //     }
    //     console.log(obj);
    // }

    subBtn.onclick = function () {

        // 用户输入的 用户名和密码
        var user = userInp.value;
        var pwd = pwdInp.value;

        if (user && pwd) {

            $.ajax({
                type: "post",
                url: "../php/login.php",
                data: {
                    user: user,
                    pwd,
                },
                dataType: "json",
                success: function (result) {
                    if (result.status) {
                        // 使用cookie  标识用户身份
                        if (isRem.checked) {
                            setCookie("logUser", user, 31);
                        } else {
                            setCookie("logUser", user);
                        }

                        // 登陆成功   判断有没有returnUrl 
                        // 有 returnUrl   => 从其他页面跳转过来的 =>跳回去
                        // 没有 returnUrl  => 跳转到主页

                        var search = location.search;

                        if (search) {  //  有 returnUrl   => 转码之后 (>跳回去);
                            var backUrl = search.split("=")[1];
                            location.href = decodeURIComponent(backUrl);
                        } else {
                            location.href = "index1.html";
                        }

                        // console.log("跳转登录");
                    } else {
                        tips.textContent = result.msg;
                    }
                }
            })


            // var xhr = new XMLHttpRequest();

            // xhr.open("post", "../php/login.php", true);
            // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            // xhr.send(`user=${user}&pwd=${pwd}`);

            // xhr.onreadystatechange = function () {

            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         console.log(xhr.responseText);
            //         var result = JSON.parse(xhr.responseText);
            //         if (result.status) {


            //             // 使用cookie  标识用户身份
            //             if (isRem.checked) {
            //                 setCookie("logUser", user, 31);
            //             } else {
            //                 setCookie("logUser", user);
            //             }


            //             location.href = "index1.html";
            //             // console.log("跳转登录");
            //         } else {
            //             tips.textContent = result.msg;
            //         }
            //     }

            // }

        }
    }

    // function getCookie(key) {
    //     var cookie = document.cookie;
    //     if (cookie) {
    //         var dataList = cookie.split("; ");
    //         var obj = {};
    //         for (var i = 0; i < dataList.length; i++) {
    //             var str = dataList[i];
    //             var name = str.split("=")[0];
    //             var val = str.split("=")[1];
    //             obj[name] = val;
    //         }
    //         return obj[key] == undefined ? "" : obj[key];
    //     }
    //     return "";
    // }

    function getCookie(key) {
        var cookie = document.cookie;
        if (cookie) {
            var dataList = cookie.split("; ");
            for (var i = 0; i < dataList.length; i++) {
                var str = dataList[i];
                var name = str.split("=")[0];
                var val = str.split("=")[1];
                if (key == name) {
                    return val;
                }
            }
        }
        return "";
    }

</script>

</html>